<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    :default-active="active_index"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    style="width: 100%;"
  >
  <div v-for="(menuItem, index) in menuInfoList" :key="index">
    <el-menu-item v-if="menuItem.children?.length === 0" :index="menuItem.routPath">
      <el-icon>
          <component :is="menuItem.icon"></component>
      </el-icon>
      <span>{{ menuItem.name }}</span>
    </el-menu-item>
  </div>
  </el-menu>
</template>

<script lang="ts" setup>
  import type { MenuInfo } from '@/types'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Tools,
    Collection,
    Management,
    List,
    Help,
  } from '@element-plus/icons-vue'
  import { reactive, ref, shallowRef } from 'vue'
  let active_index = ref('1')
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log("handleOpen函数执行")
    console.log(key, keyPath)
    console.log("变更激活序号", key)
    active_index.value = key
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log("handleClose函数执行")
    console.log(key, keyPath)
  }

  let menuInfoList = shallowRef<MenuInfo[]>([
    {
      id: 1,
      name: '规则场景',
      icon: Tools,
      routPath: 'ruleScenarios',
      children: []
    },
    {
      id: 2,
      name: '业务模型',
      icon: Collection,
      routPath: 'businessModel',
      children: []
    },
    {
      id: 3,
      name: '规则管理',
      icon: Management,
      routPath: 'ruleManagement',
      children: []
    },
    {
      id: 4,
      name: '常量集合',
      icon: List,
      routPath: 'constList',
      children: []
    },
    {
      id: 5,
      name: '规则测试',
      icon: Help,
      routPath: 'ruleTest',
      children: []
    },
  ])
</script>

<style scoped>
  .tac {
    height: 100%;
    width: 100%;
    /* background-color: lightblue; 为了方便查看效果，设置背景颜色 */
  }
  .menuCol {
    width: 100%;
  }
  .el-col {
    width: 100%; /* 修改: width: 200px; 改为 width: 100%; */
  }
</style>